<template>
    <div class="fund-list">
        <el-card class="risk-control-button">
            <div>
                <span slot="button" class="dict-r-slot">
                    <el-button type="primary" size="mini" @click="search">查询</el-button>
                </span>
            </div>
        </el-card>
        <div class="content-div">
            <el-table :data="tableData" border size="mini" style="width: 100%" height="76vh">
                <el-table-column prop="fundCode" label="产品代码"> </el-table-column>
                <!--产品代码转产品显示代码 DictionConstUtil.FNFundShowCode(value)  -->
                <el-table-column prop="fundName" label="产品名称" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="fundNameSt" label="产品简称" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="fundProductCode" label="对外产品代码" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="fundType" label="产品类型" show-overflow-tooltip :formatter="handleFundType"> </el-table-column>
                <el-table-column prop="openDate" label="成立日期" show-overflow-tooltip :formatter="formatterDate" align="center"> </el-table-column>
                <el-table-column prop="curName" label="基础币种" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="sourceType" label="来源类型" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ SourceType[scope.row.sourceType] }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="contractEndDate" label="产品到期日" :formatter="formatterDate" show-overflow-tooltip></el-table-column>
                <el-table-column prop="period" label="产品所属期" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ Dict.FundPeriod[scope.row.period] }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="periodStartDate" label="所属期开始日期" :formatter="formatterDate" min-width="120" show-overflow-tooltip> -->
                <!-- <template slot-scope="scope">
                        <span>{{ dateFormat[scope.row.periodStartDate] || '' }}</span>
                    </template> -->
                <!-- </el-table-column> -->
                <!-- <el-table-column prop="periodEndDate" label="所属期结束日期" :formatter="formatterDate" min-width="120" show-overflow-tooltip> -->
                <!-- <template slot-scope="scope">
                        <span>{{ dateFormat[scope.row.periodEndDate] || '' }}</span>
                    </template> -->
                <!-- </el-table-column> -->
                <el-table-column fixed="right" label="操作" width="80">
                    <template slot-scope="scope">
                        <RiskIconButton
                            type="primary"
                            icon="el-icon-edit"
                            size="mini"
                            :disabled="scope.row.sourceType == '2'"
                            @on-click="handleEdit(scope.row)"
                        ></RiskIconButton>
                        <!-- <RiskIconButton type="primary" icon="el-icon-set-up" size="mini" @on-click="handleShowUpdate(scope.row)"></RiskIconButton> -->
                    </template>
                </el-table-column>
            </el-table>

            <risk-pagination :paging="page" @page-change="pageChange"></risk-pagination>
        </div>
        <yh-dialog
            drag
            title="查询条件"
            :visible.sync="searchDialog.visible"
            width="400px"
            v-loading="loading"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-form label-width="120px" size="mini">
                <el-form-item label="产品代码">
                    <el-input placeholder="产品代码" style="width: 220px" v-model="fundInfoSettingRequest.fundCode"></el-input>
                </el-form-item>
                <el-form-item label="产品简称">
                    <el-input style="width: 220px" placeholder="产品简称" v-model="fundInfoSettingRequest.fundNameSt"></el-input>
                </el-form-item>
                <el-form-item label="产品名称">
                    <el-input style="width: 220px" placeholder="产品名称" v-model="fundInfoSettingRequest.fundName"></el-input> </el-form-item
                ><el-form-item label="对外产品代码">
                    <el-input style="width: 220px" placeholder="对外产品代码" v-model="fundInfoSettingRequest.fundProductCode"></el-input>
                </el-form-item>
                <el-form-item label="产品类型">
                    <el-select style="width: 220px" placeholder="产品类型" v-model="fundInfoSettingRequest.fundType" clearable>
                        <el-option
                            v-for="item in FundTypes"
                            :key="item.dictKey"
                            :value="item.dictKey"
                            :label="item.dictKey + ' ' + item.dictKeyName"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="来源类型">
                    <el-select v-model="fundInfoSettingRequest.sourceType" placeholder="来源类型" clearable>
                        <el-option v-for="(value, key) in sourceTypeOptions" :key="key" :label="key + ' ' + value" :value="key"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="searchDialogReset"> 重 置 </el-button>
                <el-button size="mini" @click="searchDialogClosed"> 取 消 </el-button>
                <el-button size="mini" type="primary" @click="searchDialogConfirm"> 确 定 </el-button>
            </div>
        </yh-dialog>

        <yh-dialog
            drag
            title="编辑产品"
            :visible="editDialog"
            :before-close="closeDialog"
            width="400px"
            v-loading="loading"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-form label-width="100px" size="mini">
                <el-form-item label="产品名称">
                    <el-input disabled placeholder="产品名称" v-model="fundName"></el-input>
                </el-form-item>
                <el-form-item label="产品到期日">
                    <el-date-picker v-model="updateForm.conEndDate" value-format="yyyyMMdd" type="date" placeholder="选择日期"> </el-date-picker>
                </el-form-item>
                <el-form-item label="建仓期">
                    <el-date-picker
                        v-model="establishDates"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyyMMdd"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="封闭期">
                    <el-date-picker
                        v-model="closeDates"
                        value-format="yyyyMMdd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="开放期">
                    <el-date-picker
                        v-model="openDates"
                        value-format="yyyyMMdd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="closeDialog"> 取 消 </el-button>
                <el-button size="mini" type="primary" @click="handleEditSubmit"> 确 定 </el-button>
            </div>
        </yh-dialog>
    </div>
</template>

<script lang="ts">
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';
import { dateFormat, formatter, formatterDate, formatterNumber, formatterTime, getCurrentPageData } from '@/utils/tools';
import { DialogVO } from '@yhfin/biz';
import { Component, Vue } from 'vue-property-decorator';
import Dict from './dict/index';
import RiskPagination from '@/common/components/risk-pagination.vue';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import moment from 'moment';

export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

@Component({
    name: 'FundInfo',
    components: {
        RiskPagination,
        RiskIconButton,
    },
})
export default class FundInfo extends Vue {
    formatterDate = formatterDate;
    formatterTime = formatterTime;
    formatter = formatter;
    formatterNumber = formatterNumber;
    private tableData: any[] = [];
    private tableDataList: any[] = [];
    Dict = new Dict();
    private fundInfoSettingRequestBackup: any = {};
    private FundTypes: any = [];
    private searchDialog: DialogVO = new DialogVO();

    private page: pages = {
        currentPage: 1,
        pageSize: 50,
        total: 0,
    };

    private sourceTypeOptions = {
        '1': '风控',
        '2': '恒生-主动',
        '5': '恒生-被动',
    };

    private fundInfoSettingRequest = {
        fundCode: '',
        fundNameSt: '',
        fundName: '',
        fundProductCode: '',
        fundType: '',
        sourceType: '',
    };
    editDialog: boolean = false;

    establishDates: any[] = ['20221012', '20221013']; // 建仓期
    closeDates: any[] = []; // 封闭期
    openDates: any[] = []; // 开放期

    // 产品修改表单
    updateForm: any = {
        fundCode: '',
        conEndDate: '',
        establishBeginDate: '',
        establishEndDate: '',
        closeBeginDate: '',
        closeEndDate: '',
        openBeginDate: '',
        openEndDate: '',
    };

    // 修改行产品名称
    fundName: string = '';

    SourceType: any = {};

    async mounted() {
        this.fundInfoSettingRequestBackup = JSON.parse(JSON.stringify(this.fundInfoSettingRequest));
        this.FundTypes = await SGU_CACHE('FundType', '/dict/list/code/Y_000002', []);
        this.SourceType = DictionConstUtil.ListToPojo(await SGU_CACHE('SourceType', '/dict/list/code/Y_000001', []));

        this.getFundInfoListByCondition();
    }

    private getFundInfoListByCondition(): void {
        this.$axios.post('/fundInfoSetting/fundInfo/byCondition', this.fundInfoSettingRequest).then((res: any) => {
            this.tableDataList = res.map(item => {
                item.key = item.fundCode;
                return item;
            });
            this.page.currentPage = 1;
            this.pageChange();
            this.searchDialogClosed();
        });
    }

    // 产品查询
    private search(): void {
        this.searchDialog.visible = true;
    }

    // 分页
    private pageChange(): void {
        this.page.total = this.tableDataList.length;
        this.tableData = getCurrentPageData(this.tableDataList, this.page.currentPage, this.page.pageSize);
        this.tableData.forEach(ele => {
            let date = this.getPeriodDate(ele);
            this.$set(ele, 'periodStartDate', date.periodStartDate || '');
            this.$set(ele, 'periodEndDate', date.periodEndDate || '');
        });
    }

    // 查询确认
    private searchDialogConfirm(): void {
        this.getFundInfoListByCondition();
    }

    // 关闭弹窗
    private searchDialogClosed(): void {
        this.searchDialog.visible = false;
    }

    // 重置
    private searchDialogReset(): void {
        this.fundInfoSettingRequest = JSON.parse(JSON.stringify(this.fundInfoSettingRequestBackup));
    }
    // 编辑产品
    private handleEdit(row: any) {
        this.fundName = row.fundName;
        this.updateForm.fundCode = row.fundCode;
        this.updateForm.conEndDate = this.hanleDefaultDate(row.contractEndDate);
        this.establishDates = [this.hanleDefaultDate(row.establishBeginDate), this.hanleDefaultDate(row.establishEndDate)];
        this.closeDates = [this.hanleDefaultDate(row.closeBeginDate), this.hanleDefaultDate(row.closeEndDate)];
        this.openDates = [this.hanleDefaultDate(row.openStartDate), this.hanleDefaultDate(row.openEndDate)];
        this.editDialog = true;
    }

    // 处理特殊值
    hanleDefaultDate(value: any) {
        if (!value || value == '0') {
            return '';
        } else {
            return value;
        }
    }

    // 查看修改记录
    private handleShowUpdate(row: any) {
        this.$emit('handelAddPane', row);
    }

    // 关闭编辑对话框
    private closeDialog() {
        this.editDialog = false;
        this.updateForm = {
            fundCode: '',
            conEndDate: '',
            establishBeginDate: '',
            establishEndDate: '',
            closeBeginDate: '',
            closeEndDate: '',
            openBeginDate: '',
            openEndDate: '',
        };
        this.establishDates = [];
        this.openDates = [];
        this.closeDates = [];
        this.fundName = '';
    }

    getPeriodDate(row: any) {
        let date: any = {};
        switch (row.period) {
            case '0':
                // 开放期
                date.periodStartDate = row.openStartDate || '';
                date.periodEndDate = row.openEndDate || '';
                break;
            case '1':
                // 封闭期
                date.periodStartDate = row.closeBeginDate || '';
                date.periodEndDate = row.closeEndDate || '';
                break;
            case '2':
                // 建仓期
                date.periodStartDate = row.establishBeginDate || '';
                date.periodEndDate = row.establishEndDate || '';
                break;
            default:
                break;
        }
        return date;
    }

    // 确认编辑
    private handleEditSubmit() {
        if (!this.updateForm.conEndDate) {
            this.yh_message_warn('合同到期日不可为空!');
            return;
        }
        if (this.establishDates) {
            // 建仓期
            this.updateForm.establishBeginDate = this.establishDates[0];
            this.updateForm.establishEndDate = this.establishDates[1];
        } else {
            this.updateForm.establishBeginDate = '';
            this.updateForm.establishEndDate = '';
        }
        // else {
        //     this.yh_message_warn('建仓期不可为空!');
        //     return;
        // }
        if (this.closeDates) {
            // 封闭期
            this.updateForm.closeBeginDate = this.closeDates[0];
            this.updateForm.closeEndDate = this.closeDates[1];
        } else {
            this.updateForm.closeBeginDate = '';
            this.updateForm.closeEndDate = '';
        }
        //  else {
        //     this.yh_message_warn('封闭期不可为空!');
        //     return;
        // }
        if (this.openDates) {
            // 开放期
            this.updateForm.openBeginDate = this.openDates[0];
            this.updateForm.openEndDate = this.openDates[1];
        } else {
            this.updateForm.openBeginDate = '';
            this.updateForm.openEndDate = '';
        }
        //  else {
        //     this.yh_message_warn('开放期不可为空!');
        //     return;
        // }
        if (
            (this.updateForm.establishBeginDate &&
                this.closeDates &&
                this.closeDates[0] &&
                this.closeDates[1] &&
                moment(this.updateForm.establishBeginDate).isBetween(moment(this.closeDates[0]), moment(this.closeDates[1]), null, '[]')) ||
            (this.updateForm.establishBeginDate &&
                this.openDates &&
                this.openDates[0] &&
                this.openDates[1] &&
                moment(this.updateForm.establishBeginDate).isBetween(moment(this.openDates[0]), moment(this.openDates[1]), null, '[]'))
        ) {
            this.yh_message_warn('建仓期、开放期、封闭期的时间不允许重叠');
            return;
        }
        if (
            (this.updateForm.closeBeginDate &&
                this.establishDates &&
                this.establishDates[0] &&
                this.establishDates[1] &&
                moment(this.updateForm.closeBeginDate).isBetween(moment(this.establishDates[0]), moment(this.establishDates[1]), null, '[]')) ||
            (this.updateForm.closeBeginDate &&
                this.openDates &&
                this.openDates[0] &&
                this.openDates[1] &&
                moment(this.updateForm.closeBeginDate).isBetween(moment(this.openDates[0]), moment(this.openDates[1]), null, '[]'))
        ) {
            this.yh_message_warn('建仓期、开放期、封闭期的时间不允许重叠');
            return;
        }
        if (
            (this.updateForm.openBeginDate &&
                this.establishDates &&
                this.establishDates[0] &&
                this.establishDates[1] &&
                moment(this.updateForm.openBeginDate).isBetween(moment(this.establishDates[0]), moment(this.establishDates[1]), null, '[]')) ||
            (this.updateForm.openBeginDate &&
                this.closeDates &&
                this.closeDates[0] &&
                this.closeDates[1] &&
                moment(this.updateForm.openBeginDate).isBetween(moment(this.closeDates[0]), moment(this.closeDates[1]), null, '[]'))
        ) {
            this.yh_message_warn('建仓期、开放期、封闭期的时间不允许重叠');
            return;
        }
        this.$axios
            .post('/fundInfoSetting/fundInfo/update', this.updateForm)
            .then(res => {
                this.yh_message_success('修改成功');
                this.getFundInfoListByCondition();
                this.closeDialog();
            })
            .catch(err => {
                this.yh_message_error(err);
            });
    }

    // 转换产品类型
    private handleFundType({ fundType }): string {
        let ret: string = '';
        this.FundTypes.forEach(element => {
            if (element.dictKey === fundType) {
                ret = element.dictKeyName;
            }
        });
        return ret;
    }
}
</script>
<style lang="scss" scoped>
.fund-list {
    padding: 20px 15px;
    height: 100%;
    .risk-control-button {
        border: 1px solid #cacaca;
        margin-bottom: 10px;
        white-space: nowrap;
    }
    .content-div {
        // height: calc(100vh - 180px);
        border: 1px solid rgb(202, 202, 202);
    }
    /deep/.el-date-editor .el-range-separator {
        width: 10%;
    }
}
/deep/ .el-card .el-card__body {
    padding: 10px;
}
</style>
